<template>
  <view class="login">
    <view class="content u-p-l-60 u-p-r-60 u-flex-col">
      <u-avatar size="120" img-mode="widthFix" bg-color="#fff" :src="config.logo" class="user-head"></u-avatar>
      <view class="title u-p-t-10 u-p-b-40 u-flex">
        <view>{{config.app_name}}</view>
      </view>
      <u-form :model="form" :error-type="errorType" ref="uForm">
        <u-form-item :label-style="labelStyle" label-position="top" label="账号" prop="username">
          <u-input trim class="form-input" :custom-style="inputStyle" placeholder-style="color: #fff;"
            v-model="form.username" placeholder="请输入用户名" />
        </u-form-item>
        <u-form-item :label-style="labelStyle" label-position="top" label="密码" prop="password">
          <u-input trim password-icon type="password" class="form-input" placeholder="请输入密码"
            placeholder-style="color: #fff;" :custom-style="inputStyle" v-model="form.password" />
        </u-form-item>
      </u-form>
      <u-checkbox-group>
        <u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index"
          :name="item.name">{{ item.name }}</u-checkbox>
      </u-checkbox-group>
      <u-button :loading="loading" @click="loginForm" type="primary" hover-class="none" :custom-style="signInBtnStyle"
        class="u-m-t-50">登录</u-button>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { BASE_URL } from '@/utils/ip.js'
import common from '@/pages/common/common.js'
const app = getApp()
export default {
  mixins: [common],
  data() {
    return {
      config: {
        app_name: '',
        logo: ''
      },
      errorType: ['toast', 'border'],
      form: {
        username: '', // 52022100  520201019899  520525017248
        password: '' // 000000
      },
      labelStyle: {
        color: '#39f',
        fontSize: '18px'
      },
      inputStyle: {
        color: "#fff",
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      },
      signInBtnStyle: {
        width: '100%',
        borderRadius: '8px',
        color: '#fff',
        fontWeight: '500',
        boxShadow: '0px 0px 10px 0px rgba(1, 72, 51, 0.2)'
      },
      loading: false,
      list: [
        {
          name: '记住密码',
          checked: true,
          disabled: false
        }
      ],
      rememberPsw: true
    }
  },
  mounted() {
    const HCuname = uni.getStorageSync('HCuname')
    const HCpassw = uni.getStorageSync('HCpassw')
    if (HCuname && HCpassw) {
      this.form.username = HCuname
      this.form.password = HCpassw
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onLoad({ code, state }) {
    // #ifndef H5
    this.$nextTick(() => {
      this.$refs.uForm.setRules(this.rules)
    })
    // #endif
  },
  onShow() {
    const config = getApp().globalData.config
    if (config.logo && config.app_name) {

      this.initConfig(config)
    } else {
      this.getAppConfig({}).then(res => {
        const config = getApp().globalData.config
        this.initConfig(config)
      })
    }
  },
  methods: {
    /**
     * 初始配置信息
     */
    initConfig(config) {
      this.config = {
        app_name: config.app_name,
        logo: config.logo ? BASE_URL + '/' + config.logo : ''
      }
    },
    checkboxChange(e) {
      this.rememberPsw = e.value
      if (e.value == true) {
        uni.setStorageSync('HCuname', this.form.username)
        uni.setStorageSync('HCpassw', this.form.password)
      } else {
        uni.removeStorageSync('HCuname')
        uni.removeStorageSync('HCpassw')
      }
    },
    loginForm() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.loading = true
          setTimeout(() => {
            if (this.loading) this.loading = false
          }, 6000)
          this.handleForm(this.form)
        }
      })
    },
    /**
     * 登录前处理
     */
    handleForm(form) {
      this.getLogin(form)
      // 50分钟更新一次token
      if (app.globalData.loginTimer) {
        clearInterval(app.globalData.loginTimer)
        app.globalData.loginTimer = null
      }
      app.globalData.loginTimer = setInterval(() => {
        this.getLogin(form)
      }, 3000000)
    },
    /**
     * 登录
     */
    getLogin(form) {
      this.$post('/login', {
        username: form.username,
        password: form.password,
        captcha: 'test',
        jsessionid: 'a250a4bdaecb223da25d4168b9678a9f',
        scLogin: form.scLogin || 'mobile'
      })
        .then(res => {
          if (res?.body?.token) {
            // 登录成功
            app.globalData.token = res.body.token
            if (this.rememberPsw) {
              uni.setStorageSync('HCuname', form.username)
              uni.setStorageSync('HCpassw', form.password)
            } else {
              uni.removeStorageSync('HCuname')
              uni.removeStorageSync('HCpassw')
            }

            // 获取权限
            this.getPrimission()

            // 跳转至learn
            uni.reLaunch({ url: '/pages/alarmConfirm/index' })
          } else {
            this.loading = false
          }
        })
        .catch(err => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scope>
.login {
  width: 100vw;
  height: 100vh;
  background-color: #0d1a51;
  background-image: url('/static/image/bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
  .content {
    padding-top: 200rpx;
  }
}
.h5-user-head {
  margin: 25vh auto 40rpx auto;
}
.h5-title {
  font-weight: 600;
  font-size: 60rpx;
}
.title {
  font-size: 40rpx;
  line-height: 68rpx;
  color: #fff;
  font-weight: 600;
}
.form-input {
  border-radius: 16rpx;
  box-shadow: 0px 0px 10px 0px rgba(1, 72, 51, 0.2);
}
</style>
